<template>
  <view class="container">
    <div class="input-wrap" :class="[light]">
      <input class="input" @focus="light = 'light'" @blur="light = ''" :value="openid" placeholder="用户码" />
    </div>

    <button class="btn" type="primary" @click="copy">复制</button>
  </view>
</template>

<script>
import uniCopy from '@/lib/js/utils/uni-copy.js';

export default {
  data() {
    return {
      light: '',
      openid: '',
    };
  },
  onShow() {
    const time = setInterval(() => {
      const openid = this.$app.getData('openid');
      if (openid) {
        this.openid = openid;
        clearInterval(time);
      }
    }, 300);
  },
  methods: {
    copy() {
      uniCopy({
        content: this.openid,
        success: () => {
          this.$app.toast('复制成功');
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  .top-bg {
    .img {
      width: 100%;
      height: 600rpx;
    }
  }

  .input-wrap {
    margin: 20rpx 40rpx;
    background-color: #fff;
    border-radius: 10rpx;
    z-index: 1;
    position: relative;
    border: 1px solid #cecece;
    transition: all 0.3s;
    position: relative;

    margin-top: 40px;

    .scan-btn {
      position: absolute;
      width: 60rpx;
      height: 60rpx;
      left: 20rpx;
      top: 50%;
      transform: translateY(-50%);
    }

    .input {
      border-radius: 10rpx;
      padding: 10px;
    }

    &.light {
      border: 1px solid $text-color-3;
    }
  }

  .btn {
    margin: 100rpx 40rpx 40rpx;
    padding: 10rpx;
    font-size: $font-l;
  }

  .tips {
    padding: 20rpx 40rpx;

    .title {
      font-size: $font-l;
      margin: 20rpx 10rpx;
      padding: 0rpx 20rpx;
      line-height: 1;
      font-weight: 700;
      border-left: 8rpx solid $text-color-3;
    }

    .row {
      padding: 5rpx 10rpx;
      color: $text-color-5;
    }
  }
}
</style>
